<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">

            <div class="btn-group" uib-dropdown if-permission="manageTask" allowed="{{userPermissions}}">
                <button type="button" class="btn btn-sm btn-default" uib-dropdown-toggle
                    ng-disabled="selection.length === 0">
                    <ng-pluralize count="selection.length"
                        when="{'0': 'No tasks selected', 'one': '{} selected task', 'other': '{} selected tasks'}">
                    </ng-pluralize>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li ng-if="menu.flag">
                        <a href ng-click="bulkFlag(true)"><i class="fa fa-flag"></i> Add flag</a>
                    </li>
                    <li ng-if="menu.unflag">
                        <a href ng-click="bulkFlag(false)"><i class="fa fa-flag-o"></i> Remove flag</a>
                    </li>
                    <li ng-if="menu.start">
                        <a href ng-click="bulkStatus('InProgress')"><i class="fa fa-play"></i> Start</a>
                    </li>
                    <li ng-if="menu.reopen">
                        <a href ng-click="bulkStatus('InProgress')"><i class="fa fa-folder-open"></i> Reopen</a>
                    </li>
                    <li ng-if="menu.close">
                        <a href ng-click="bulkStatus('Completed')"><i class="fa fa-folder"></i> Close</a>
                    </li>
                    <li ng-if="menu.delete" class="divider"></li>
                    <li>
                        <a href ng-click="bulkRemove()"><i class="fa fa-trash"></i> Delete</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group" if-permission="manageTask" allowed="{{userPermissions}}">
                <button class="btn btn-sm btn-primary" ng-click="state.isNewTask = true">
                    <i class="glyphicon glyphicon-plus"></i>
                    Add Task
                </button>
            </div>

            <div class="btn-group" uib-dropdown>
                <button class="btn btn-primary btn-sm dropdown-toggle" uib-dropdown-toggle type="button">
                    <i class="fa fa-filter"></i>
                    Quick Filters
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li>
                        <a ng-click="filterMyTasks()"><i class="fa fa-user"></i> My tasks</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a ng-click="filterBy('status', 'InProgress')"><i class="glyphicon glyphicon-play"></i> In
                            progress tasks</a>
                    </li>
                    <li>
                        <a ng-click="filterBy('status', 'Waiting')"><i class="fa fa-hourglass-o"></i> Waiting tasks</a>
                    </li>
                    <li>
                        <a ng-click="filterBy('status', 'Completed')"><i class="fa fa-check"></i> Completed tasks</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a ng-click="filterBy('flag', true)"><i class="fa fa-folder-open"></i> Flagged tasks</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group pull-right" role="group">
                <page-sizer collection="list" sizes="[10, 15, 30, 100]"></page-sizer>
            </div>

            <div class="btn-group pull-right" role="group">
                <button class="btn btn-sm"
                    ng-class="{true: 'btn-primary', false:'btn-default'}[filtering.context.showFilters]" type="button"
                    ng-click="toggleFilters()">
                    <i class="fa fa-search"></i> Filters
                </button>
            </div>
            <div class="btn-group pull-right">
                <button class="btn btn-sm btn-default" ng-click="toggleGroupedView()">
                    <i class="glyphicon glyphicon-th-list"></i>
                    Show {{state.showGrouped ? 'as a List' : 'Groups'}}
                </button>
            </div>
        </div>
    </div>
</div>
